<template>
  <el-tag v-if="isTag" :style="styles()" :effect="effect" :type="tagType" @click="handleClick">{{ getValue() }}</el-tag>
  <el-tooltip v-else-if="shwoTooltip" :effect="tooltipEffect" :content="getValue()" :placement="tooltipPosition">
    <div :style="styles()" class="anvil-code-paragraph" @click="handleClick">{{ getValue() }}</div>
  </el-tooltip>
  <div v-else :style="styles()" class="anvil-code-paragraph" @click="handleClick">{{ getValue() }}</div>
</template>

<script>
export default {
  name: 'Paragraph',
  inheritAttrs: false,
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    fontSize: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: ''
    },
    backgroundColor: {
      type: String,
      default: ''
    },
    bold: {
      type: Boolean,
      default: false
    },
    italic: {
      type: Boolean,
      default: false
    },
    underline: {
      type: Boolean,
      default: false
    },
    align: {
      type: String,
      default: ''
    },
    showFuncValue: {
      type: Boolean,
      default: false
    },
    valueFunction: {
      type: String,
      default: '()=>{}'
    },
    ellipsis: {
      type: Boolean,
      default: false
    },
    shwoTooltip: {
      type: Boolean,
      default: false
    },
    tooltipEffect: {
      type: String,
      default: 'dark'
    },
    tooltipPosition: {
      type: String,
      default: undefined
    },
    useDict: {
      type: Boolean,
      default: false
    },
    useDictComp: {
      type: String,
      default: ''
    },
    customCssObj: {
      type: String,
      default: ''
    },
    // 是否开启tag模式
    isTag: {
      type: Boolean,
      default: false
    },
    // 标签主题
    effect: {
      type: String,
      default: 'light'
    },
    dictColors: {
      type: Array,
      default: () => []
    },
    click: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      localData: ''
    };
  },
  computed: {
    tagType() {
      if (this.isTag && this.dictColors && this.dictColors.length) {
        const value = this.getValue();
        const colorItem = this.dictColors.find((item) => item.value == value);
        return colorItem ? colorItem.type : 'primary';
      } else {
        return 'primary';
      }
    },
    isSupportClick() {
      return this.click && typeof this.click === 'function';
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.localData = newVal;
      },
      immediate: true
    },
    localData(newVal, oldVal) {
      this.$emit('update:modelValue', newVal);
    }
  },
  methods: {
    load(data) {
      this.localData = data;
    },
    functionValue() {
      try {
        const value = this.localData !== '' ? this.localData : this.content;
        const { getInstance } = this.useAnvilCodeStore();
        // 默认将表单字段带入查询接口
        let data = {};
        const instance = getInstance(this.$attrs.pageId, 'form', this.$attrs.pageId);
        if (instance) {
          data = instance.getFormData();
        }
        const func = eval(this.valueFunction);
        const { scopeRow } = this.$attrs;
        if (scopeRow && scopeRow.row) {
          return func(scopeRow.row, value);
        } else {
          return func(data, value);
        }
      } catch (e) {
        console.log('error', e);
        return '';
      }
    },
    styles() {
      let style = {
        color: this.color,
        fontSize: this.fontSize ? this.fontSize + 'px' : undefined,
        lineHeight: this.fontSize ? this.fontSize + 'px' : undefined,
        backgroundColor: this.backgroundColor,
        fontWeight: this.bold ? 'bold' : 'normal',
        fontStyle: this.italic ? 'italic' : 'normal',
        textDecoration: this.underline ? 'underline' : 'none',
        textAlign: this.align || '',
        'white-space': 'pre-wrap',
        cursor: this.isSupportClick ? 'pointer' : 'default',
        ...this.getCustomCss()
      };

      if (this.ellipsis) {
        return {
          ...style,
          'white-space': 'nowrap',
          overflow: 'hidden',
          'text-overflow': 'ellipsis'
        };
      } else {
        return style;
      }
    },
    getCustomCss() {
      const cssObj = {};
      try {
        const Attrs = this.customCssObj.split('\n');
        Attrs.forEach((element) => {
          const css = element.replaceAll(' ', '').split(':');
          if (css && css.length == 2) {
            cssObj[css[0]] = css[1];
          }
        });
      } catch (e) {
        console.log('error!', e);
      } finally {
        return cssObj;
      }
    },
    getDictReflect() {
      try {
        const anvilCodeStore = this.useAnvilCodeStore();
        const { pageId } = this.$attrs;
        const instance = anvilCodeStore.getInstance(pageId, 'component', this.useDictComp);
        if (!instance) {
          return this.localData;
        }
        let trueInstance = undefined;
        if (instance instanceof Array) {
          trueInstance = instance[0];
        } else {
          trueInstance = instance;
        }
        const { dic, props } = trueInstance;
        const mydict = dic.find((item) => item[props.value] == this.localData);
        if (!mydict) {
          return this.localData;
        }

        return mydict[props.label];
      } catch (e) {
        console.log('getDictReflect Error！', e);
      }
    },
    getValue() {
      if (this.showFuncValue) {
        return this.functionValue();
      } else if (this.useDict && this.useDictComp) {
        return this.getDictReflect();
      } else {
        return this.localData !== '' ? this.localData : this.content;
      }
    },
    handleClick() {
      if (this.isSupportClick) {
        this.click();
      }
    }
  }
};
</script>
